<template>
    <div>
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <el-form label-width="80px"
                             v-model="searchForm"
                             :inline="true"
                             style="margin-left: -25px">
                        <el-form-item label="姓名">
                            <el-input type="text"
                                      v-model="searchForm.lastName"
                                      placeholder="请输入姓名"></el-input>
                        </el-form-item>
                        <el-form-item>
                                <el-button type="primary"
                                           icon="el-icon-search"
                                           size="medium" @click="searchSubmit">查询
                                </el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </template>
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="#"
                        width="100px"
                >
                </el-table-column>
                <el-table-column
                        prop="lastName"
                        label="姓名"
                >
                </el-table-column>
                <el-table-column
                        prop="email"
                        label="邮箱">
                </el-table-column>
                <el-table-column
                        prop="gender"
                        label="性别">
                </el-table-column>
                <el-table-column
                        prop="departmentName"
                        label="部门名称">
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="info" size="small" @click="employeeInfo(scope.row)">查看</el-button>
                        <el-button type="primary" size="small" @click="employeeEdit(scope.row)">编辑</el-button>
                        <el-button type="danger" size="small" @click="employeeDelete(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @current-change="handleCurrentChange"
                    @size-change="handSizeChange"
                    :current-page="pageDto.currentPage"
                    background
                    :page-sizes="[2, 4, 6, 8]"
                    :page-size="pageDto.limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageDto.total" style="margin-top: 15px">
            </el-pagination>
        </el-card>
        <el-dialog
                title="员工信息"
                v-model="dialogVisible"
                width="30%">
            <el-descriptions title="" direction="vertical" :column="3" border>
                <el-descriptions-item label="姓名">{{lastName}}</el-descriptions-item>
                <el-descriptions-item label="邮箱">{{email}}</el-descriptions-item>
                <el-descriptions-item label="性别">
                    <el-tag>
                        {{gender}}
                    </el-tag>
                </el-descriptions-item>
            </el-descriptions>
            <template #footer>
                <span class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog
                title="员工编辑"
                width="30%"
                v-model="editDialog"
        >
            <el-form label-width="80px" v-model="formBlock">
                <el-form-item label="姓名">
                    <el-input type="text" v-model="formBlock.lastName" placeholder="请输入姓名"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" style="margin-top: 20px">
                    <el-input type="text" v-model="formBlock.email" placeholder="请输入邮箱"></el-input>
                </el-form-item>
                <el-form-item label="性别" style="margin-top: 20px">
                    <el-select v-model="formBlock.gender" placeholder="请选择性别">
                        <el-option label="男" value="0"></el-option>
                        <el-option label="女" value="1"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                  <span class="dialog-footer">
                    <el-button size="medium" @click="editDialog=false">取 消</el-button>
                    <el-button type="primary" size="medium" @click="editSubmit">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
    import {defineComponent, reactive, onMounted, ref, toRefs, getCurrentInstance} from 'vue'
    import {selectList, deleteEmployeeById, updateEmployee} from '@/api/employee.ts'
    import {ElMessage} from "element-plus";

    export default defineComponent({
        name: "index",
        setup() {
            // props 是响应式的 不能使用es6进行结构 如果es6进行解构会失去响应式
            const {ctx} = getCurrentInstance() as any
            let tableData = ref<any | []>([]);
            let dialogVisible = ref<boolean>(false);
            let editDialog = ref<boolean>(false);
            let employee = reactive<any>({
                lastName: '',
                email: '',
                gender: '',
                searchForm:{
                    lastName:''
                },
                formBlock: {
                    id: 0,
                    lastName: '',
                    email: '',
                    gender: ''
                },
                pageDto: {
                    currentPage: 1,
                    limit: 2,
                    total: 0
                }
            });
            let methods = reactive({
                employeeList: () => {
                    let data = employee.pageDto;
                    data.lastName=employee.searchForm.lastName;
                    selectList('/cache/test/employeeList', data).then((response) => {
                        const {data} = response.data;
                        data.records.forEach((item: any, index: any) => {
                            item.gender = item.gender === 0 ? '男' : '女';
                        });
                        // 表格的数据
                        tableData.value = data.records;
                        employee.pageDto.total = data.total;
                        employee.searchForm.lastName=''
                    })
                },
                employeeDelete: (rowId: number) => {
                    ctx.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        let employees = {id: rowId} as any;
                        deleteEmployeeById('/cache/test/deleteEmployee', employees).then(response => {
                            const {data} = response;
                            if (data?.code === 0) {
                                ctx.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                methods.employeeList();
                            }

                        });

                    }).catch(() => {
                        ctx.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },
                // 查看信息弹出框
                employeeInfo: (row: any) => {
                    dialogVisible.value = true;
                    employee.lastName = row.lastName;
                    employee.email = row.email;
                    employee.gender = row.gender;
                },
                // 编辑数据回显
                employeeEdit: (row: any) => {
                    editDialog.value = true;
                    employee.formBlock.lastName = row.lastName;
                    employee.formBlock.email = row.email;
                    employee.formBlock.gender = row.gender;
                    employee.formBlock.id = row.id;

                },
                // 编辑提交
                editSubmit: () => {
                    let data = employee.formBlock;
                    updateEmployee('/cache/test/updateEmployee', data).then(response => {
                        const {data} = response;
                        if (data?.code === 0) {
                            ElMessage.success({
                                message: data.message,
                                type: 'success'
                            })
                        }
                        methods.employeeList();
                        editDialog.value = false
                    })
                },
                handleCurrentChange: (val: number) => {
                    employee.pageDto.currentPage = val;
                    methods.employeeList();
                },
                handSizeChange: (val: number) => {
                    employee.pageDto.limit = val;
                    methods.employeeList();
                },
                searchSubmit:() =>{
                    methods.employeeList();
                }

            });
            onMounted(() => {
                methods.employeeList();
            });
            return {
                tableData,
                ...toRefs(methods),
                dialogVisible,
                editDialog,
                ...toRefs(employee),
            }
        }


    })
</script>

<style scoped>
    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .el-form-item {
        margin-bottom: 0px !important;
    }

    .footer {
        margin-top: 10px;
        text-align: left;
    }

    .el-select {
        cursor: pointer;
        padding-right: 35px;
        display: block;
        width: 340px !important;
    }
</style>
